<template>
  <div class="app">
    <div class="picturedeal">
      <h3>图片粘贴工具</h3>
      <div>
      <el-button type="small" round @click="cleantext">清空</el-button>
      </div>
      <textarea id="editable" contenteditable="true" rows="15" cols="25"></textarea>
    </div>
    
  <div class='tinymce'>      
    <div class="main">
    <el-input class="title" v-model="title" placeholder="输入文章标题" maxlength="100" show-word-limit></el-input>
    <editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
    <div class="type">
    <p>文章分类:</p>
    <el-select v-model="pagetype" placeholder="类别" style="float:left;width:145px">
            <el-option label="Python" value="Python"></el-option>
            <el-option label="Java" value="Java"></el-option>
            <el-option label="前端" value="前端"></el-option>
            <el-option label="后端" value="后端"></el-option>
            <el-option label="运维" value="运维"></el-option>
            <el-option label="人工智能" value="人工智能"></el-option>
            <el-option label="安全" value="安全"></el-option>
            <el-option label="其他" value="其他"></el-option>
            </el-select>
    </div>
    <div class="comment">
    <el-switch
      v-model="enable_comment"
      active-text="允许评论"
      inactive-text="不允许评论"
      active-value="0"
      inactive-value="1"
      >
    </el-switch>
    </div>
    </div> 
    <div class="fabu">
        <el-button type="primary" @click="dialogSend = true">
            发布博客
        </el-button>
    </div>
    <div class="caogao">
        <el-button type="primary" @click="dialogSave = true">
             存为草稿
        </el-button>
      <el-dialog
        title="提示"
        :visible.sync="dialogSend"
        width="20%"
        :before-close="handleClose">
        <span>确定发布?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogSend = false">取 消</el-button>
          <el-button type="primary" @click="send">确 定</el-button>
        </span>
        </el-dialog>

        <el-dialog
        title="提示"
        :visible.sync="dialogSave"
        width="20%"
        :before-close="handleClose">
        <span>确定存稿?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogSave = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
        </el-dialog>
    </div>
  </div>
  </div>
</template>

<script>
import {apiurl} from "../../service/api.js";
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'

import '../../../static/jietu'
export default {
  name: 'tinymce',
  data () {
    return {
      title: '',       //标题内容
      tinymceHtml: '',  //富文本内容
      pagetype:'',    //文章类别
      status: '',     //是否定位草稿
      enable_comment:'0', //是否允许评论

      dialogSend : false,  //发布对话框
      dialogSave : false,  //草稿对话框

      init: {
        language_url: require('../../../static/tinymce/zh_CN.js'),
        language: 'zh_CN',
        skin_url: require('../../../static/tinymce/skins/ui/oxide-dark/skin.css'),
        height: 700,
        width: 800,
        plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
        branding: false
      }
    }
  },
  mounted () {
    tinymce.init({})
  },
  components: {Editor},
  methods:{
    send(){
      var that = this
      that.status = 1
      var edittype = "fwb"
      var req = {
        blog_title : that.title,
        blog_content : that.tinymceHtml,
        // blog_preface : that.preface,
        blog_status : parseInt(that.status),
        enable_comment : parseInt(that.enable_comment),
        category_id : that.pagetype,
        edit_type : edittype
      }
      if (that.pagetype ==''){
        that.$message.error(`请选择文章类别`)
      }else if(that.title ==''){
         that.$message.error(`请填写标题`)
        }else{
          that.$axios.post({
          url: apiurl.editBlog,
          data:req
        }).then(res=>{
          if(res.data.code==200){
            alert("编辑成功")
            window.opener=null;
            window.close()

          }else{
            alert("编辑失败")
          }
        })
      }
    },
    save(){
      var that = this
      that.status = 0
      var edittype = "fwb"
      var req = {
        blog_title : that.title,
        blog_content : that.tinymceHtml,
        blog_status : parseInt(that.status),
        enable_comment : parseInt(that.enable_comment),
        category_id : that.pagetype,
        edit_type : edittype
      }
       if (that.pagetype == ''){
        that.$message.error(`请选择文章类别`)
      }else{
        that.$axios.post({
        url: apiurl.editBlog,
        data:req
      }).then(res=>{
        if(res.data.code==200){
          alert("编辑成功")
          window.opener=null;
          window.close()
        }else{
          alert("编辑失败")
        }
      })
      }
    },
    cleantext(){
      document.querySelector("#editable").value=""
    }
  }
}
</script>

<style scoped>
    .tinymce{
        position: absolute;
        top : 100px;
        height: 1000px;
        width: 900px;
        left: 25%;
        box-shadow: 10px 10px 5px #888;
        border:1px solid #666;
    }
    .main{
        position: absolute;
        top:50px;
        height: 700px;
        width: 800px;
        left: 5%;
    }
    .title{
        width: 800px;
        padding-bottom: 10px;
    }
    .preface{
        padding-bottom: 10px;
    }
    .fabu{
        position: absolute;
        top:920px;
        left: 45px;
    }
    .caogao{
        position: absolute;
        top:920px;
        left: 210px;
    }
    .comment{
      float: right;
    }
    .picturedeal{
      position: absolute;
      height: 200px;
      width: 20%;
      top: 150px;
    }
    #editable{
      overflow: scroll;
      overflow-x:hidden;
    }
</style>